<template>
	<el-container>
		<el-header>
			<div class="logoBox">
				<div style="display: flex;align-items: center;">
					<el-image class="image" :src="src" style="width: 36px;height: 36px"></el-image>
					<p>欢迎登录后台管理</p>
				</div>
				<div>
					<el-button style="float: right;" type="primary" @click="back">返 回</el-button>
				</div>
			</div>
		</el-header>
		<el-main>
			<div class="jiaose">请选择登录角色</div>
			<div class="cardBox">
				<el-card v-for="(item,index) in cardData" :key="index">
					<div class="card-item">
						<p class="card-title" :style="{color:color[index]}">{{TYPE[item.type]}}商家</p>
						<p class="col" :style="{color:color[index]}">{{item.merchantShortName}}</p>
						<el-button type="danger" :style="{backgroundColor:color[index]}" style="border:none"
							@click="toRole(item)">进入角色
						</el-button>
					</div>
				</el-card>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				src: require('../assets/logo.png'),
				cardData: [],
				TYPE: {
					1: '线上',
					2: '线下'
				},
				color: ['#b081ff', '#ff8196', '#ffa767', '#017eff'],
				AVAILABLESTATUS: {
					0: '正常',
					1: '该商家已禁用，请联系客服',
					2: '该商家已删除'
				}
			}
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				var _this = this;
				this.$http.get(this.$api.roles).then(res => {
					if (res.code == 0) {
						if (res.data.length == 1) {
							if (res.data[0].availableStatus == 0) {
								if (res.data[0].type == 1) {
									this.$router.push('/merchantInfo')	
								} else {
									localStorage.setItem('merchantId', item.merchantId);
									localStorage.setItem('merchantShortName', item.merchantShortName);
									let hostname = window.location.hostname;
									if (hostname == '47.108.181.177') {
										window.location.href = 'http://47.108.181.177:4005/baseInfo/storeSettings?token='+localStorage.getItem('token');
									} else {
										window.location.href = 'https://shangjia.kuaibuapp.com/baseInfo/storeSettings?token='+localStorage.getItem('token');
									}
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.AVAILABLESTATUS[item.availableStatus]
								});
							}
						} else {
							this.cardData = res.data;
						}
					} else {
						_this.$notify.error({
							title: '错误',
							duration: 3000,
							message: res.msg
						});
						setTimeout(function() {
							_this.$router.push('/');
						}, 3000);
					}
				})
			},
			toRole(item) {
				if (item.availableStatus == 0) {
					if (item.type == 1) {
						this.$router.push('/merchantInfo')
					} else {
						localStorage.setItem('merchantId', item.merchantId);
						localStorage.setItem('merchantShortName', item.merchantShortName);
						let hostname = window.location.hostname;
						if (hostname == '47.108.181.177') {
							window.location.href = 'http://47.108.181.177:4005/baseInfo/storeSettings?token='+localStorage.getItem('token');
						} else {
							window.location.href = 'https://shangjia.kuaibuapp.com/baseInfo/storeSettings?token='+localStorage.getItem('token');
						}
					}
				} else {
					this.$notify.error({
						title: '错误',
						message: this.AVAILABLESTATUS[item.availableStatus]
					});
				}
			},
			back() {
				this.$router.push('/');
			}
		},
	}
</script>

<style scoped lang="scss">
	.el-header {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 18px;
		font-weight: 500;
		color: #017EFF;
		padding: 0 60px;

		.logoBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.image {
				margin-right: 10px;
			}
		}
	}

	.el-main {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		background-image: url(../assets/home-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: calc(100vh - 60px);

		.jiaose {
			font-size: 24px;
			font-weight: 500;
			color: #FFFFFF;
		}

		.cardBox {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.el-card {
			margin: 0 15px;
		}

		.card-item {
			width: 200px;
			height: 240px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.card-title {
				font-size: 30px;
				font-style: italic;
				font-weight: bold;
			}
		}


	}
</style>
